<template>
  <div class="search-form">
    <el-table :data="[searchForm]" style="width: 100%">
      <el-table-column label="商品名称" width="200">
        <template #default="scope">
          <el-input v-model="searchForm.key" placeholder="请输入商品名称" clearable />
        </template>
      </el-table-column>
      <el-table-column label="品牌" width="200">
        <template #default="scope">
          <el-input v-model="searchForm.brand" placeholder="请输入品牌" clearable />
        </template>
      </el-table-column>
      <el-table-column label="类目" width="200">
        <template #default="scope">
          <el-input v-model="searchForm.category" placeholder="请输入类目" clearable />
        </template>
      </el-table-column>
      <el-table-column label="最低价" width="150">
        <template #default="scope">
          <el-input-number v-model="searchForm.minPrice" :min="0" placeholder="最低价" />
        </template>
      </el-table-column>
      <el-table-column label="最高价" width="150">
        <template #default="scope">
          <el-input-number v-model="searchForm.maxPrice" :min="0" placeholder="最高价" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200">
        <template #default>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { ItemPageQuery } from '@/api/item'

const emit = defineEmits(['search', 'reset'])

const searchForm = reactive<ItemPageQuery>({
  key: '',
  brand: '',
  category: '',
  minPrice: undefined,
  maxPrice: undefined,
  pageNo: 1,
  pageSize: 10
})

const handleSearch = () => {
  const params = { ...searchForm }
  // 将价格从元转换为分
  if (params.minPrice !== undefined) {
    params.minPrice = Math.floor(params.minPrice * 100)
  }
  if (params.maxPrice !== undefined) {
    params.maxPrice = Math.floor(params.maxPrice * 100)
  }
  emit('search', params)
}

const handleReset = () => {
  searchForm.key = ''
  searchForm.brand = ''
  searchForm.category = ''
  searchForm.minPrice = undefined
  searchForm.maxPrice = undefined
  emit('reset')
}

defineExpose({
  searchForm
})
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

:deep(.el-table__header) {
  background-color: #fff;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style> 